import "./index.scss";
import oneImg from "@public/images/decoration/power/alarmRank/1.png";
import twoImg from "@public/images/decoration/power/alarmRank/2.png";
import threeImg from "@public/images/decoration/power/alarmRank/3.png";
import moreImg from "@public/images/decoration/power/alarmRank/4.png";
export default defineComponent({
	setup() {
		const rankData = ref([
			{
				rank: 1,
				img: oneImg,
				title: "2#温湿度传感器",
				value: 158,
				progress: "50%"
			},
			{
				rank: 2,
				img: twoImg,
				title: "1楼总发电机",
				value: 132,
				progress: "40%"
			},
			{
				rank: 3,
				img: threeImg,
				title: "3楼1#温湿度传感器",
				value: 158,
				progress: "35%"
			},
			{
				rank: 4,
				img: moreImg,
				title: "2#漏水控制器",
				value: 89,
				progress: "30%"
			},
			{
				rank: 5,
				img: moreImg,
				title: "3#温湿度传感器",
				value: 78,
				progress: "25%"
			}
		]);
		return () => (
			<ul class="alarmRank">
				<el-scrollbar>
					{rankData.value.map(item => {
						return (
							<li>
								<div class="img">
									<img src={item.img} alt="" />
									{item.rank > 2 ? <span class={[item.rank === 3 ? "three" : "more"]}>{item.rank}</span> : ""}
								</div>
								<span>{item.title}</span>
								<div class="progress">
									<div class="progressActive" style={{ width: item.progress }}></div>
								</div>
								<p>{item.value}</p>
							</li>
						);
					})}
				</el-scrollbar>
			</ul>
		);
	}
});
